import Vue from "vue";
import VueRouter from "vue-router";

import Home from "@/views/home/home";
import Movies from "@/views/home/movies/Movies";
import InTheaters from "@/views/home/movies/InTheaters";
import ComingSoon from "@/views/home/movies/ComingSoon";
import CityPicker from "@/views/citypicker/cityPicker";
import Theaters from "@/views/home/theaters/Theaters";
import Profile from "@/views/home/profile/Profile";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: Home,
    redirect: "/home/movies",
    children: [
      {
        path: "movies",
        name: "movies",
        component: Movies,
        redirect: "/home/movies/intheaters",
        children: [
          {
            path: "intheaters",
            name: "intheaters",
            component: InTheaters,
          },
          {
            path: "comingSoon",
            name: "comingSoon",
            component: ComingSoon,
          },
        ],
      },
      {
        path: "theaters",
        name: "theaters",
        component: Theaters,
      },
      {
        path: "profile",
        name: "profile",
        component: Profile,
      },
    ],
  },
  {
    path: "/citypicker",
    name: "citypicker",
    component: CityPicker,
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;
